<template>
    <div class="commission-detail">
        <div class="commission-container">
            <div class="money-address">
                <span>到账地址</span>
                <span>微信零钱</span>
            </div>
            <p>提现金额</p>
            <div class="choose-sum">
                <div class="choose-input">
                    <span>￥</span>
                    <input type="text" placeholder="请输入提现金额" v-model="getAll">
                </div>
                <div class="choose-all">
                    <span>可提现佣金￥{{money['commission']}}</span>
                    <div class="all-btn" @click="getAllMoney">
                        <span>全部提现</span>
                    </div>
                </div>
            </div>
            <div class="config-btn" @click="getMoney">
                <span>提现</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'commission',
    data(){
        return {
            money:{},
            getAll:''
        }
    },
    methods:{
        getCommission(){
            let that = this;
            let token = localStorage.getItem('tokne');
            let disNum = localStorage.getItem('distribution');
            that.$ajax(that, 'get', that.$api.distributionMoney+disNum, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.money = res.data['msg'];
                }else{
                    that.toast(res.data['msg']);
                }
            })
        },
        getAllMoney(){
            this.getAll = this.money.commission;
        },
        getMoney(){
            let that = this;
            let token = localStorage.getItem('token');
            let disNum = localStorage.getItem('distribution');
            let temObj = {};
            temObj['apply_price'] = that.getAll;
            temObj['distribution_id'] = disNum;
            let loader = that.loading();
            that.$ajax(that, 'post', that.$api.getMoney, temObj, token, function(res){
                if(res.data['error_code'] == 0){
                    that.toast('提现成功！');
                    that.$router.push('/distribution/center');
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '佣金提现';
        this.getCommission();
    },
    activated(){
        this.$store.state.tab = '佣金提现';
        this.getCommission();
    }
}
</script>

<style lang='less'>
@rem:100rem;

.commission-detail{
    width: 750/@rem;
    margin-top: 88/@rem;
    padding-top: 60/@rem;
    .commission-container{
        width: 650/@rem;
        height: 500/@rem;
        margin: 0 auto;
        background-color: #ffffff;
        box-shadow: 0px 3/@rem 7/@rem 0px 
            rgba(0, 0, 0, 0.06);
        border-radius: 5/@rem;
        .money-address{
            width: 550/@rem;
            height: 86/@rem;
            margin: 0 auto;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #bcbcbc;
            span{
                font-size: 24/@rem;
            }
            span:nth-of-type(2){
                margin-left: 74/@rem;
                color: #6699ff;
            }
        }
        p{
            margin: 50/@rem 0;
            text-align: start;
            margin-left: 50/@rem;
        }
        .choose-sum{
            width: 450/@rem;
            margin:0 auto;
            .choose-input{
                width: 100%;
                padding-bottom: 10/@rem;
                border-bottom: 1px solid #bcbcbc;
                display: flex;
                align-items: center;
                span{
                    font-size: 48/@rem;
                }
                input{
                    border: none;
                    outline: none;
                    margin-left: 20/@rem;
                    font-size: 30/@rem;
                }
            }
            .choose-all{
                width: 100%;
                display: flex;
                margin-top: 10/@rem;
                .all-btn{
                    margin-left:20/@rem;
                    height: 40/@rem;
                    color: #6699ff;
                }
            }
        }
        .config-btn{
            width: 400/@rem;
            height: 60/@rem;
            margin: 0 auto;
            background-color: #6699ff;
            border-radius: 5/@rem;
            margin-top: 52/@rem;
            line-height: 60/@rem;
            color: #ffffff;
        }
        .config-btn:active{
            background: #5e8eef;
        }
    }
}
</style>
